<template>
	<view class="safe-wapper">
		<view class="top-fixed">
			<u-navbar :fixed="false" :titleStyle="{ color: '#FFF' }" leftIconColor="#fff" bgColor="transparent"
				:autoBack="true" title="站区运营全景"></u-navbar>
			<view class="tablist">
				<view class="tableft">
					<view class="tab" v-for="(item,index) in  tabList" :key="index" @click="changeTab(index,item)"
						:class="index===active ? 'active' :''">
						{{item.name}}
						<u-icon name="arrow-up-fill" color="#fff" size="10" v-if="index===active"></u-icon>
					</view>
				</view>
			</view>
			<view class="top-bg">
				<view class="top-border"></view>
			</view>
			<view class="clearfix"></view>
		</view>

		<view class="chart-con" :style="{marginTop:heightEle *2 +'rpx' }" v-if="show">
			<view class="chart-tit">
				航行数据 
			</view>
			<view class="hx-data">
				<view class="item">
					<view class="number">{{zongHangCi}}</view>
					<view class="name">总航次 (次)</view>
				</view>
				<view class="item">
					<view class="number">{{zongCheLiangShu}}</view>
					<view class="name">总车辆 (辆)</view>
				</view>
				<view class="item">
					<view class="number">{{zongZaiZhong}}</view>
					<view class="name">总吨位 (吨)</view>
				</view>
				<view class="item">
					<view class="number">{{zongRenShu}}</view>
					<view class="name">总人数 (人)</view>
				</view>
				<view class="item">
					<view class="number">{{zongLiCheng}}</view>
					<view class="name">总里程 (KM)</view>
				</view>
				<view class="item">
					<view class="number">{{zongYingShou}}</view>
					<view class="name">总营收 (万元)</view>
				</view>
			</view>
			<view class="h10 bg"></view>
			<view class="chart-tit">
				车辆类型分布
			</view>
			<ringBarCharts :chartData="cheLiangLeiXingFenBu" v-if="cheLiangLeiXingFenBu" />
			<u-empty v-else text="暂无数据" width="320rpx" height="320rpx"
				icon="../../static/image/chart-no-data.png" class="nochartdata"></u-empty>
			<view class="h10 bg"></view>
			<view class="chart-tit">
				货车类型分布
			</view>
			<ringBarCharts :chartData="huoCheLeiXingFenBu" v-if="huoCheLeiXingFenBu" />
			<u-empty v-else text="暂无数据" width="320rpx" height="320rpx"
				icon="../../static/image/chart-no-data.png" class="nochartdata"></u-empty>
			<view class="h10 bg"></view>

			<view class="chart-tit">
				渡运车辆分布图
			</view>
			<view class="arc-bar">
				<view class="bar">
					<arcbarCharts :chartData="sanKe" v-if="sanKe.series[0].title!==''" />
				</view>
				<view class="bar">
					<arcbarCharts :chartData="zhengGai" v-if="zhengGai.series[0].title!==''" />
				</view>
				<view class="bar">
					<arcbarCharts :chartData="quanTui" v-if="quanTui.series[0].title!==''" />
				</view>
			</view>
			<view class="h10 bg"></view>
			<view class="chart-tit bg">
				数据同比
			</view>

			<view class="dataList">
				<view class="item" :class="dataActive===index?'active':''" @click="changeData(index)"
					v-for="(item,index) in dataList " :key="index">
					{{item.name}}
				</view>
			</view>
			<view class="chart-tit">
				<template v-if="dataActive===0">
					同期收费(元)
				</template>
				<template v-else-if="dataActive===1">
					同期总重量(吨)
				</template>
				<template v-else-if="dataActive===2">
					同期车辆数(辆)
				</template>
				<template v-else>
					同期油耗(吨)
				</template>
			</view>
			<twoBarCharts v-if="tongqi" :chartData="tongqi" :dataActive="dataActive" />
			<view class="h40"></view>
		</view>




	</view>
</template>

<script>
	import {
		operatingPanoramicStatistics
	} from '@/api/report.js'
	import moreBarCharts from '../components/moreBarCharts.vue'
	import barCharts from '../components/barCharts.vue'
	import ringBarCharts from '../components/ringBarCharts.vue'
	import arcbarCharts from '../components/arcbarCharts.vue'
	import twoBarCharts from '../components/twoBarCharts.vue'
	import {
		ringBarChartData,
		twoBarChartData
	} from '@/utils/index.js'
	export default {
		components: {
			moreBarCharts,
			barCharts,
			ringBarCharts,
			arcbarCharts,
			twoBarCharts
		},
		data() {
			return {
				type: 1, //1:年度,2:月度,3:季度
				tabList: [{
					name: '本年',
					type: 1
				}, {
					name: '本季',
					type: 3,
				}, {
					name: '本月',
					type: 2,
				}],
				active: 0,
				dataActive: 0,
				dataList: [{
					name: '收费'
				}, {
					name: '总重量',
				}, {
					name: '车辆数',
				}, {
					name: '油耗',
				}],
				zongCheLiangShu: 0,
				zongHangCi: 0,
				zongLiCheng: 0,
				zongRenShu: 0,
				zongYingShou: 0,
				zongZaiZhong: 0,
				cheLiangLeiXingFenBu: null,
				huoCheLeiXingFenBu: null,
				quanTui: {
					series: [{
						name: "劝退",
						color: "#307FDE",
						data: '',
						title: ''
					}]
				},
				sanKe: {
					series: [{
						name: "散客",
						color: "#307FDE",
						data: '',
						title: ''
					}]
				},

				zhengGai: {
					series: [{
						name: "整改",
						color: "#307FDE",
						data: '',
						title: ''
					}]
				},
				tongqi: null,
				tongQiCheLiangShu: null,
				tongQiShouFei: null,
				tongQiYouHao: null,
				tongQiZongZhongLiang: null,
				show: false,
				heightEle: 0,
				navHeight: uni.getStorageSync('navHeight') || 0,
			}
		},
		mounted() {
			uni.createSelectorQuery().in(this).select(".top-fixed").boundingClientRect(data => {
				this.heightEle = Math.floor(data.height)
			}).exec()
		},
		onLoad(option) {
			this.getList(1)
		},

		methods: {
			changeTab(index, item) {
				if (index !== this.active) {
					this.show = false
					this.active = index
					uni.pageScrollTo({
					    duration:0,
					    scrollTop:0
					})
					this.getList(item.type)
				}
			},
			changeData(index) {
				if (index !== this.dataActive) {
					this.dataActive = index
					this.tongqi = null
					switch (index) {
						case 0:
							this.tongqi = this.tongQiShouFei
							break;
						case 1:
							this.tongqi = this.tongQiZongZhongLiang
							break;
						case 2:
							this.tongqi = this.tongQiCheLiangShu
							break;
						case 3:
							this.tongqi = this.tongQiYouHao
							break;
						default:
							break;
					}

				}
			},

			getList(type) {
				const params = {
					type: type
				}
				uni.showLoading({
					title: '加载中'
				})
				operatingPanoramicStatistics(params).then(res => {
					this.show = true
					const {
						zongCheLiangShu,
						zongHangCi,
						zongLiCheng,
						zongRenShu,
						zongYingShou,
						zongZaiZhong,
						cheLiangLeiXingFenBu,
						huoCheLeiXingFenBu,
						quanTui,
						sanKe,
						zhengGai,
						tongQiCheLiangShu,
						tongQiShouFei,
						tongQiYouHao,
						tongQiZongZhongLiang,
					} = res.data
					this.zongCheLiangShu = zongCheLiangShu
					this.zongHangCi = zongHangCi
					this.zongLiCheng = zongLiCheng
					this.zongRenShu = zongRenShu
					this.zongYingShou = zongYingShou
					this.zongZaiZhong = zongZaiZhong
					this.cheLiangLeiXingFenBu =cheLiangLeiXingFenBu.length>0? ringBarChartData(cheLiangLeiXingFenBu):null
					this.huoCheLeiXingFenBu =huoCheLeiXingFenBu.length>0? ringBarChartData(huoCheLeiXingFenBu):null
					this.zhengGai.series[0].title = zhengGai > 0 ? zhengGai : '0'
					this.sanKe.series[0].title = sanKe > 0 ? sanKe : '0'
					this.quanTui.series[0].title = quanTui > 0 ? quanTui : '0'
					const total = zhengGai + sanKe + quanTui
					if (total > 0) {
						this.zhengGai.series[0].data = (zhengGai / total).toFixed(2)
						this.sanKe.series[0].data = (sanKe / total).toFixed(2)
						this.quanTui.series[0].data = (quanTui / total).toFixed(2)
					}else{
						this.zhengGai.series[0].data =0
						this.sanKe.series[0].data = 0
						this.quanTui.series[0].data =0
					}

					this.tongQiCheLiangShu = twoBarChartData(tongQiCheLiangShu)
					this.tongQiShouFei = twoBarChartData(tongQiShouFei)
					this.tongQiYouHao = twoBarChartData(tongQiYouHao)
					this.tongQiZongZhongLiang = twoBarChartData(tongQiZongZhongLiang)
					this.tongqi = this.tongQiShouFei


				}).finally(() => {
					uni.hideLoading()
				})

			}

		}
	}
</script>

<style lang="scss" scoped>
	.safe-wapper {
		width: 100vw;
		min-height: 100vh;

		.top-fixed {
			top: 0;
			left: 0;
			width: 100vw;
			position: fixed;
			background: #3E8EF0;
			z-index: 11;
		}

		/deep/ .u-navbar--fixed {
			background: #3E8EF0;
		}

		.h10 {
			height: 10rpx;
		}

		.tablist {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 94rpx;
			clear: both;
			background: #3E8EF0;
			.tableft {
				display: flex;
				justify-content: center;
				align-items: center;

				.tab {
					margin: 0rpx 26rpx;
					padding: 23rpx 0;
					color: #95BCEB;
					font-size: 34rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					text-align: center;
					line-height: 48rpx;
					position: relative;

					/deep/.u-icon--right {
						position: absolute;
						width: 100%;
						display: flex;
						bottom: -4rpx;
						justify-content: center;
					}
				}

				.active {
					color: #fff;
				}
			}

		 

		}
		.top-bg{
			background: #3E8EF0;
		}

		.top-border {
			background: #FFFFFF;
			border-radius: 50rpx 50rpx 0 0;
			position: relative;
			height: 20rpx;
			// margin-top: -4rpx;
		}

		.chart-con {
			background: #fff;
			position: relative;

			.bg {
				background: #F5F7F9;
			}

			.chart-tit {
				height: 40rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #323232;
				padding: 30rpx;
				 
			}

			.hx-data {
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				padding-bottom: 20rpx;


				.item {
					width: 220rpx;
					height: 140rpx;
					background: #F2F6FC;
					display: flex;
					flex-wrap: wrap;
					align-items: center;
					justify-content: center;
					margin: 7rpx;

					.number {
						width: 100%;
						font-size: 40rpx;
						color: #323232;
						font-weight: bold;
						text-align: center;
						line-height: 52rpx;
					}

					.name {
						font-size: 20rpx;
						font-weight: 400;
						color: #909399;
						line-height: 28rpx;
					}
				}
			}

			.arc-bar {
				display: flex;
				justify-content: center;
				align-items: center;

				.bar {
					width: 33.3333%;
				}
			}

			.dataList {
				display: flex;
				justify-content: center;
				align-items: center;
				background: #F5F7F9;
				padding-bottom: 18rpx;

				.item {
					width: 131rpx;
					height: 52rpx;
					background: rgba(29, 111, 233, 0.1000);
					border-radius: 26rpx;
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #1D6FE9;
					text-align: center;
					line-height: 52rpx;
					margin: 0 20rpx;
				}

				.active {
					background: #4080FF;
					color: #FFFFFF;
				}

			}
		}
	}
</style>
